<template>
  <router-view v-if="['edit','add'].includes(page)" />
 <div class="main-content" v-else>
   <div class="main-header" v-if="props.isSearch">
     <div class="header-search">
       <slot name="main-search"></slot>
       <slot name="main-action"></slot>
     </div>
     <slot name="mainHeaderRight"></slot>
   </div>
   <slot name="table"></slot>
   <slot name="pagination"></slot>
 </div>
</template>

<script setup name="Main">
import { computed, defineProps } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const page = computed(() => router.currentRoute.value.query?.page);
const props = defineProps({
  isSearch: {
    type: Boolean,
    default: true,
  },
});
</script>

<style scoped lang="css">
.main-content {
  background: var(--el-bg-color);
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 4px;
  padding: 0 20px;
}
.main-header {
  height: 12%;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.header-search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
